<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <style>
        #container {
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative;
            margin: 0 auto;
            background-color: bisque;
        }

        #list {
            width: 4200px;
            height: 400px;
            position: absolute;
            z-index: 1;
        }

        #list img {
            float: left;
            width: 600px;
            height: 400px;
        }

        #pointsDiv {
            width: 600px;
            height: 30px;
            line-height: 30px;
            position: absolute;
            bottom: 0;
            display: flex;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: -webkit-flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            z-index: 10;
            text-align: center;
        }

        #pointsDiv div {
            width: 13px;
            height: 13px;
            border-radius: 50%;
            display: block;
            margin: 0 4px;
            background-color: rgb(196, 194, 194);
            opacity: 0.6;
        }

        #pointsDiv div.on {
            background-color: rgb(105, 102, 102);
        }

        a {
            z-index: 10;
            color: cornsilk;
            font-size: 24px;
            text-decoration: none;
            width: 27px;
            height: 80px;
            opacity: 0.3;
            display: flex;
            justify-items: center;
            align-content: center;
            align-items: center;
            background-color: rgb(117, 117, 115);
            float: left;
            border-radius: 8%;
        }

        #prev {
            position: absolute;
            left: 10px;
            top: 30%;
        }

        #next {
            position: absolute;
            right: 10px;
            top: 30%;
        }
    </style>
    <div id="container">
        <div id="list" style="left: -600px;">
            <img src="../img/test/55.jpg" alt="55">
            <img src="../img/test/11.jpg" alt="11">
            <img src="../img/test/22.jpg" alt="22">
            <img src="../img/test/33.jpg" alt="33">
            <img src="../img/test/44.jpg" alt="44">
            <img src="../img/test/55.jpg" alt="55">
            <img src="../img/test/11.jpg" alt="11">
        </div>
        <div id="pointsDiv">
            <div index="1" class="on"></div>
            <div index="2"></div>
            <div index="3"></div>
            <div index="4"></div>
            <div index="5"></div>
        </div>
        <a href="javascript:;" id="prev" class="arrow">&#9668;</a>
        <a href="javascript:;" id="next" class="arrow">&#9658;</a>
    </div>



    <script src="../js/jquery.3.5.1.js"></script>
    <script>
        $(function () {
            var $container = $("#container");
            var $list = $("#list");
            var $prev = $("#prev");
            var $next = $("#next");
            var $points = $("#pointsDiv>div");
            var PAGE_WIDTH = 600;   // 定义偏移量
            var TIME = 400; // 翻页的持续时间
            var ITEM_TIME = 20; // 单元移动的间隔时间
            var imgCount = $points.length;
            var index = 0; // 当前下标
            var autoPageTime = 3000; // 自动翻页间隔时间

            // 切换上一页
            $prev.click(function () {
                // 平滑翻到上一页
                nextPage(false)

            })
            // 切换下一页
            $next.click(function () {
                // 平滑翻到下一页
                nextPage(true)

            })

            /* 
            next：
                true:平滑翻到上一页
                false:平滑翻到下一页
                数值：指定的下标页
            */
            // 标识正在翻页
            var moving = false;
            function nextPage(next) {
                if (moving) return;
                moving = true;

                /* 
                总的事件：TIME=400
                单元移动的间隔时间：ITEM_TIME=20
                总的偏移量：offset
                单元移动的偏移量：itemoffset=offset/(TIME/ITEM_TIEM)
                */
                var offset = 0;
                if (typeof next === "boolean") {
                    offset = next ? -PAGE_WIDTH : PAGE_WIDTH;
                } else {
                    offset = -(next - index) * PAGE_WIDTH
                }
                var currLeft = $list.position().left;   // 得到当前的left值
                var itemoffset = offset / (TIME / ITEM_TIME);
                var targetLeft = currLeft + offset; // 计算出目标处的left值

                intervalId = setInterval(() => {
                    currLeft += itemoffset;
                    if (currLeft === targetLeft) {
                        clearInterval(intervalId);

                        // 头尾相互跳转
                        // 如果到达了最右边的图片，跳转到最左边的第二张图片
                        if (currLeft <= -((imgCount) * PAGE_WIDTH) + itemoffset) {
                            currLeft = -PAGE_WIDTH;
                        } else if (currLeft >= 0) {
                            // 如果到达了最左边的图片，跳转到最右边的倒数第二张图片
                            currLeft = -(imgCount * PAGE_WIDTH);
                        }

                        // 标识正在翻页
                        moving = false;
                    }

                    $list.css("left", currLeft);
                }, ITEM_TIME);
                // 更新圆点
                updataPoints(next)
            }

            // 更新圆点
            function updataPoints(next) {
                // 计算出目标圆点的下标targetIndex
                var targetIndex = 0;
                if (typeof next === "boolean") {
                    if (next) {
                        targetIndex = index + 1;
                        if (targetIndex === imgCount) {
                            targetIndex = 0;
                        }
                    } else {
                        targetIndex = index - 1;
                        if (targetIndex === -1) {
                            targetIndex = imgCount - 1;
                        }
                    }
                } else {
                    targetIndex = next;
                }
                // 将当前index的《div》的class移除
                $points.eq(index).removeClass("on");
                // 给目标圆点添加class=“on”
                $points.eq(targetIndex).addClass("on");
                // 将index更新为targetIndex
                index = targetIndex;
            }

            // 点击圆点
            $points.click(function () {
                //  目标页的下标
                var targetIndex = $(this).index();
                // 只用当点击的不是单签也的圆点时才翻页
                if (targetIndex != index) {
                    nextPage(targetIndex);
                }
            })



            // 每隔几秒自动滑动到下一页
            var setInterval2 = setInterval(() => {
                nextPage(true);
            }, autoPageTime);

            // 当鼠标进入图片区域时，自动切换停止，当鼠标离开后，又开始自动切换
            $container.hover(function () {
                clearInterval(setInterval2);
            }, function () {
                setInterval2 = setInterval(() => {
                    nextPage(true);
                }, autoPageTime);
            })
        })
    </script>
</body>

</html>